<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>实时数据可视化</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <h2>页面访问统计</h2>
  <div id="main" style="width:100%; height:500px;"></div>
  <script>
    fetch('/api/data').then(res => res.json()).then(data => {
      const chart = echarts.init(document.getElementById('main'));
      chart.setOption({
        title: { text: 'PV & UV' },
        tooltip: {},
        legend: { data:['PV','UV'] },
        xAxis: { data: data.map(d => d.page) },
        yAxis: {},
        series: [
          { name:'PV', type:'bar', data: data.map(d => d.pv) },
          { name:'UV', type:'bar', data: data.map(d => d.uv) }
        ]
      });
    });
  </script>
</body>
</html>
